<!DOCTYPE html>
<html>
<head>
<style> 
.div2
{
width:100px;
height:100px;
background:red;
position:relative;
animation:move 5s infinite;
}
@keyframes move
{
0%   {top:0px; left:0px; background-color: #00FFFF;}
		25%  {top:0px; left:100px; background-color: antiquewhite;}
		50%  {top:100px; left:100px;background-color: black;}
		75%  {top:100px; left:0px; background-color: blueviolet;}
		100% {top:0px; left:0px; }
}
.div1{
	width: 310px;
	height: 310px;
	position: relative;
	animation: run 4s infinite linear;
	background-image: url(../images/dq.png);
	border-radius: 200px;
	margin: -10px;
}
@keyframes run{
		from{transform: rotate(0deg);}
		
		to{transform: rotate(360deg);}
		0%   {top:0px; left:0px; background-color: #00FFFF;}
		25%  {top:0px; left:100px; background-color: antiquewhite;}
		50%  {top:100px; left:100px;background-color: black;}
		75%  {top:100px; left:0px; background-color: blueviolet;}
		100% {top:0px; left:0px; }
	}
.div1:hover{
		animation-play-state: paused ;
	}
</style>
</head>
<body>

  <div class="div2">  </div>
  <div class="div1"></div>
</body>
</html>
